<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:include="sys/header :: copy"></div>
<head>
    <title>管理员列表</title>
</head>
<body>
<div id="rrapp" v-cloak>
    <el-row :gutter="24" style="margin-top:20px;">
        <el-col :span="4">
            <el-card class="box-card" body-style="height:100px;width:100px">
                <div slot="header" class="clearfix">
                    <span>数据量</span>
                    <el-button
                            style="float: right;font-size: 20px; padding: 3px 0;background: #409eff;color: #ffffff"
                            type="text">昨日
                    </el-button>
                </div>
                <div>
                    <el-button type="text" icon="el-icon-loading"
                               style="font-size: 20px;">{{showData.yesterday}}
                    </el-button>
                </div>

            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="box-card" body-style="height:100px;width:100px">
                <div slot="header" class="clearfix">
                    <span>数据量</span>
                    <el-button
                            style="float: right;font-size: 20px; padding: 3px 0;background: #409eff;color: #ffffff"
                            type="text">今日
                    </el-button>
                </div>
                <div>
                    <el-button type="text" icon="el-icon-loading"
                               style="font-size: 20px;">{{showData.dayCount}}
                    </el-button>
                </div>

            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="box-card" body-style="height:100px;width:100px">
                <div slot="header" class="clearfix">
                    <span>数据量</span>
                    <el-button
                            style="float: right;font-size: 20px; padding: 3px 0;background: #409eff;color: #ffffff"
                            type="text">七天内
                    </el-button>
                </div>
                <div>
                    <el-button type="text" icon="el-icon-loading"
                               style="font-size: 20px;">{{showData.day7}}
                    </el-button>
                </div>

            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="box-card" body-style="height:100px;width:100px">
                <div slot="header" class="clearfix">
                    <span>数据量</span>
                    <el-button
                            style="float: right;font-size: 20px; padding: 3px 0;background: #409eff;color: #ffffff"
                            type="text">月内
                    </el-button>
                </div>
                <div class="bottom clearfix">
                    <el-button type="text" icon="el-icon-loading"
                               style="font-size: 20px;float: right;">{{showData.day30}}
                    </el-button>
                </div>


            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="box-card" body-style="height:100px;width:100px">
                <div slot="header" class="clearfix">
                    <span>数据量</span>
                    <el-button
                            style="float: right;font-size: 20px; padding: 3px 0;background: #409eff;color: #ffffff"
                            type="text">三个月
                    </el-button>
                </div>
                <div>
                    <el-button type="text" icon="el-icon-loading"
                               style="font-size: 20px;">{{showData.day90}}
                    </el-button>
                </div>

            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="box-card" body-style="height:100px;width:100px">
                <div slot="header" class="clearfix">
                    <span>数据量</span>
                    <el-button
                            style="float: right;font-size: 20px; padding: 3px 0;background: #409eff;color: #ffffff"
                            type="text">总数
                    </el-button>
                </div>
                <div>
                    <el-button type="text" icon="el-icon-loading"
                               style="font-size: 20px;">{{showData.count}}
                    </el-button>
                </div>

            </el-card>
        </el-col>
    </el-row>
    <el-form :inline="true"
             style="margin-bottom:10px;margin-top:10px;padding-top:10px;padding-left:10px;background-color:#f2f2f2"
             class="demo-form-inline">
        <el-form-item label="条件">
            <el-input placeholder="" v-model="params.keyword"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @Click="query">查询</el-button>
            <el-button @Click="reset">重置</el-button>
        </el-form-item>
    </el-form>
    <div id="handleBatch" style="float: right;margin: 5px">
        <el-button type="primary" @click="add" icon="el-icon-plus">新增</el-button>
        <el-button type="danger" @click="deleteBatch" icon="el-icon-error">批量删除</el-button>
    </div>
    <div v-show="showList">
        <el-table
                ref="multipleTable"
                @row-click="handleRowChange"
                show-overflow-tooltip
                @selection-change="selectionRowsChange"
                border
                :data="tableData"
                style="width: 100%">

            <el-table-column type="selection" sortable width="50" label="id" prop="roleId"></el-table-column>
            <el-table-column sortable  label="角色名称" prop="roleName"></el-table-column>
            <el-table-column sortable width="180" label="备注" prop="remark"></el-table-column>
            <el-table-column sortable width="180" label="创建者ID" prop="createUserId">
            </el-table-column>
            <el-table-column sortable width="180" label="创建时间" prop="createTime">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row.id, scope.row)"
                               icon="el-icon-edit"> 详情
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row.id, scope.row)"
                               icon="el-icon-delete">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="currentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="新增/更新" :visible.sync="dialogFormVisible">
            <el-form :model="sysRole" ref="submitFrom" :rules="rules" label-width="100px"
                     :label-position="labelPosition">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="sysRole.roleName" placeholder="角色名称"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="sysRole.remark" placeholder="备注"></el-input>
                </el-form-item>
                <el-form-item label="页面权限">
                    <el-tree
                            ref="tree"
                            :data="allMenu"
                            show-checkbox
                            node-key="menuId"
                            :default-checked-keys="sysRole.menuIdList"
                            :props="defaultProps">
                    </el-tree>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('submitFrom')">取 消</el-button>
                <el-button type="primary" @click="ruleFrom('submitFrom')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script th:src="@{/js/sys/sysRole.js}"></script>
</html>